<script setup lang="ts">
import Taro from "@tarojs/taro";
import { useRouter } from "@tarojs/taro";

import ByCell from "@/components/ui/ByCell.vue";
import ByEmpty from "@/components/ui/ByEmpty.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import ApiMerchant from "@/api/merchant";
import useFetch from "@/hooks/useFetch";

import { TMerchantActivity } from "@/global";

const { params } = useRouter<{
  // 申请商户
  mid: `${number}`;
}>();

// 获取商户活动列表
const { data: merchantActivityList } = useFetch<[TMerchantActivity]>(
  ApiMerchant.getMerchantActivityList,
  {
    defaultParams: {
      page: 1,
      size: 20,
      merchant_id: parseInt(params.mid),
    },
    afterFetch: (res: any) => res?.list,
  }
);

const handleNavigate = async (url: string) => {
  // 临时
  if (!url) return;
  Taro.navigateTo({ url });
};
</script>

<template>
  <ByEmpty v-if="!merchantActivityList" title="暂无报名活动" />

  <ContentBox class="mt-4" hideBgImg v-for="item in merchantActivityList">
    <view class="p-4">
      <view>
        <view class="text-2xl mb-1">{{ item?.activity_title }}</view>
        <view class="text-l mb-4 text-[#888]">
          展位名称: {{ item?.stand_title }}
        </view>
        <view
          class="flex justify-around text-center px-2 py-3 bg-[#BB8554]/20 rounded-lg"
        >
          <!-- <view class="flex flex-col mt-1 ">
                <view class="mt-2 text-lg text-[#888]">{{ item?.stand_title }}</view>
                <view class="mt-2 text-sm text-[#888]">展位名称</view>
              </view> -->
          <view class="flex flex-col mt-1">
            <view class="mt-2 text-lg text-[green]">
              ¥{{ item?.deposit_amount / 100 }}
            </view>
            <view class="mt-2 text-sm text-[#888]">押金金额</view>
          </view>
          <view class="flex flex-col mt-1">
            <view class="mt-2 text-lg text-[green]">
              {{ 100 - item?.receipt_percent }}%
            </view>
            <view class="mt-2 text-sm text-[#888]">结算比例</view>
          </view>
        </view>

        <ByCell
          next
          label="总销售额(分成前)"
          align="right"
          class="mt-4 px-2 py-3 bg-[#BB8554]/20 rounded-lg"
          @tap="handleNavigate('datelist?id=' + item?.id)"
        >
          <text class="text-2xl text-[#ac1717]">
            ¥{{ item?.total_amount / 100 }}
          </text>
        </ByCell>

        <ByCell
          next
          label="应结销售额(分成后)"
          align="right"
          class="mt-4 px-2 py-3 bg-[#BB8554]/20 rounded-lg"
          @tap="handleNavigate('datelist?id=' + item?.id)"
        >
          <text class="text-2xl text-[#ac1717]">
            ¥{{ item?.receipt_amount / 100 }}
          </text>
        </ByCell>

        <ByCell
          next
          label="总核销量"
          align="right"
          class="mt-4 px-2 py-3 bg-[#BB8554]/20 rounded-lg"
          @tap="handleNavigate('verifyList?id=' + item?.id)"
        >
          <text class="text-2xl text-[#ac1717]">
            {{ item?.verify_count }}
          </text>
        </ByCell>
      </view>
    </view>
  </ContentBox>
</template>
